<template>
    <div>
        <div style="margin: 10px 0;padding-bottom: 50px">
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-input
                            placeholder="请输入考试名称"
                            v-model="searchName"
                            clearable
                            style="width: 100%; margin-bottom: 10px">
                        <template #append>
                            <el-button @click="searchExams">搜索</el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="4">

                </el-col>
            </el-row>

            <el-row :gutter="10">
                <el-col :span="6" v-for="e in listData" :key="e.id" style="margin-bottom: 10px">
                    <div style="border: 1px solid #ccc; padding-bottom: 10px">
                        <img :src="e.img" alt="" style="width: 100%;height: 150px">
                        <div style="padding: 5px;font-size: 16px;font-weight: bold;">考试名称：{{ e.name }}</div>
                        <div style="padding: 5px">开始时间：{{ e.startTime }}</div>
                        <div style="padding: 5px">结束时间：{{ e.endTime }}</div>
                        <div style="padding: 5px">发布者：{{ e.user }}</div>
                        <div style="padding: 5px">
                            <el-button
                                    :disabled="getExamStatus(e)==='已结束' || getExamStatus(e)==='未开始'  || getExamStatus(e)==='进行中'"
                                    :type="getButtonType(getExamStatus(e))"
                                    @click="handleExamClick(e)">
                                {{ getExamStatus(e) }}
                            </el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <div style="margin-top: 20px">
                <el-pagination
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        :page-size="pageInfo.pageSize"
                        :current-page="pageInfo.currentPage"
                        background
                        layout="sizes, prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ExamList",
        data() {
            return {
                total: 0,
                listData: [],
                pageInfo: {
                    pageNum: 1,
                    pageSize: 10
                },
                searchName: '', // 搜索关键词
                searchStatus: '' // 搜索状态
            };
        },
        created() {
            this.getPageList();
        },
        methods: {
            getPageList() {
                this.$axios.get("/exam/page", {
                    params: {
                        ...this.pageInfo,
                        name: this.searchName,
                        status: this.searchStatus
                    }
                }).then(res => {
                    this.listData = res.data.list;
                    this.total = res.data.total;
                });
            },
            currentChange(e) {
                this.pageInfo.pageNum = e;
                this.getPageList();
            },
            sizeChange(e) {
                this.pageInfo.pageSize = e;
                this.getPageList();
            },
            searchExams() {
                this.pageInfo.pageNum = 1; // 重置为第一页
                this.getPageList();
            },
            getExamStatus(exam) {
                const now = new Date();
                const start = new Date(exam.startTime);
                const end = new Date(exam.endTime);
                const eightHoursLater = new Date(now.getTime() + 8 * 60 * 60 * 1000); // 当前时间加八小时

                if (start > eightHoursLater) {
                    return '未开始';
                } else if (end < now) {
                    return '已结束';
                } else {
                    return '进行中';
                }
            },
            getButtonType(status) {
                switch (status) {
                    case '未开始':
                        return 'info';
                    case '进行中':
                        return 'success';
                    case '已结束':
                        return 'danger';
                    default:
                        return 'primary';
                }
        }}
    };
</script>
<style scoped>

    .el-input {
        font-size: 16px; /* 增大字体大小 */
    }
    .el-input__inner {
        padding: 10px 15px; /* 增大内边距 */
    }
    .el-button {
        font-size: 18px; /* 增大按钮字体大小 */
        padding: 11px 18px; /* 增大按钮内边距 */
    }
</style>
